<template>
	<div songlist-res>
	  <SongList :songlist="songlistRes" />
	  <Pagination :total="songlistResCount" :page-size="30" @handleCurrentChange="getSearchSongListBy" />
	</div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import SongList from '@/components/content/songlist/SongList.vue';
  import { getSearchSongList } from '@/network/searchdetail/searchdeatil';
  
  // 获取路由参数
  const route = useRoute();
  const keywords = ref(route.params.keywords);
  const songlistRes = ref([]);
  const songlistResCount = ref(0);
  
  // 获取歌单数据
  const getSearchSongListBy = (page = 1) => {
	const offset = (page - 1) * 30;
	getSearchSongList(keywords.value, offset).then((res) => {
	  songlistRes.value = res.data.result.playlists;
	  songlistResCount.value = res.data.result.playlistCount;
	});
  };
  
  // 在组件加载时获取歌单数据
  onMounted(() => {
	getSearchSongListBy();
  });
  </script>
  
  <style lang="less" scoped>
  .result {
	padding: 10px 0px 15px;
  }
  </style>
  